<template>
  <div id="a" style="width: 800px;height: 500px"/>
</template>

<script>
import { onMounted } from "vue";
import * as echarts from 'echarts';
import axios from "axios";

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "A",

  setup() {

    let xydate;
    let xdate;
    let ydate;

    onMounted(() => {
      axios.get("/api/a").then((res) => {

        xydate = res.data
        filter()
        setData()

        console.log(xydate)


        let myChart = echarts.init(document.getElementById("a"));

        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: xdate
          },
          yAxis: {
            type: 'value',
            scale:true,
          },
          series: [
            {
              data: ydate,
              type: 'bar'
            }
          ]
        });

      })
    });

    let filter = function () {
      xydate.sort((a ,b) => {
        return b.totalconsumption - a.totalconsumption
      })
      xydate = xydate.slice(0, 5)
    }

    function setData() {
      xdate = xydate.map(v => v.nationname)
      ydate = xydate.map(v => v.totalconsumption)
    }
  }
}
</script>

<style scoped>

</style>